<template>
  <div class="CountCard">
    <div v-for="item in dataList" :key="item.key" @click="handle(item)">
      <span class="black" :class="{ 'blue': item.key && status === item.key }" v-html="numberFormat(item.value)"></span>
      <p>{{ $t(item.name) }}</p>
    </div>
  </div>
</template>

<script>
import { numberFormat } from '@/util/tools'
export default {
  name: 'CountCard',
  props: ['dataList', 'status'],
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
    numberFormat,
    handle (item) {
      this.$emit('search', item)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.CountCard
  display flex
  background #fff
  padding 24px 0
  // border 1px solid borderColor
  border-radius 10px
  >div
    cursor pointer
    color cccGrey
    flex 1
    text-align center
    border-right 1px solid borderColor
    &:last-child
      border 0
    p
      margin 0
    >span
      font-size 36px
      font-weight 600
  .black
    color textGrey
  .green
    color lightGreen
  .red
    color errorColor
  .blue
    color var(--orange-800)!important
  .grey
    color textLightGrey
</style>
